@import "./../../../mixins.less";

.ctcPage {
  color: #fff;

  a {
    color: #fff;
  }

  .up {
    color: @upColor;
  }

  .down {
    color: @downColor;
  }

  .pageHead {
    position: relative;
    min-width: 1280px;
    height: 50px;
    line-height: 1;
    background-color: @tradingModuleBgColor;
    border-bottom: @tradingBorder;

    .logo {
      float: left;
      margin-left: 14px;
      line-height: 50px;
      font-size: 15px;
      color: #fff;

      &:hover {
        color: #fff;
      }

      img {
        margin-top: 12px;
        height: 26px;
      }
    }
    .menuCenter{
      float: left;
      border-right: solid 1px #373E48;
      li{
        float: left;
        padding:0 10px;
        width: 86px;
        height: 50px;
        line-height: 50px;
        border-left: solid 1px #373E48;
        text-align: center;
        a {
          color: #fff;
        }

        &:nth-of-type(1) a{
          position: relative;
          color: #3782FF;
        }

        &:nth-of-type(1) a:after {
          position: absolute;
          bottom: -8px;
          content: "";
          display: block;
          height: 2px;
          line-height: 2px;
          width: 26px;
          left: 50%;
          transform: translateX(-50%);
          background: #233a75;
        }
      }
      li.active {
          background: #000;
      }
    }
    .menu {
      position: relative;
      z-index: 2;
      float: left;
      font-size: 14px;

      &:hover {
        >.caption {
          color: @tradingLinkActiveColor;
          background-color: #090C10;

          .arrow {
            background-image: url(../../../assets/images/head/menu-arrow-up.png);
          }
        }
        >.panel {
          display: block;
          // transform: scaleY(1);
        }
      }

      >.caption {
        margin: 0 5px;
        padding:0 15px;
        width: 100%;
        text-align: center;
        line-height: 50px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        border: 1px solid #373f4a;
        border-width: 0 1px 0;
        box-sizing: border-box;

        .icon {
          vertical-align: top;
          display: inline-block;
          margin-top: 15px;
          margin-right: 2px;
          width: 18px;
          height: 18px;
        }
        .text {
          vertical-align: top;
          display: inline-block;
          margin-right: 4px;
          font-size: 14px;
          font-weight:normal;
        }
        .arrow {
          vertical-align: top;
          display: inline-block;
          margin-top: 22px;
          width: 12px;
          height: 7px;
          background: url(./../../../assets/images/arrow-down.png) no-repeat;
        }
      }
      >.panel {
        padding-bottom: 10px;
        position: absolute;
        display: none;
        font-size: 12px;
        background-color: #151821;
        box-shadow: 1px 1px 6px #111;
        // transform: scaleY(0);
      }
    }

    .menu.currentPair {
      margin-left: 14px;
      float: left;
      .caption {
        height: 50px;
        padding:0 14px;
      }
      .symbol {
        margin: 0;
        font-weight: bold;
      }
    }

    .pairsBox {
      display: none;
      position: relative;
      z-index: 9;
      left: -100px;
      padding: 0 0 10px;
      width: 380px;
      background-color: #090C10;

      .tabTitle {
        .mix-clearfix;
        padding-left: 20px;
        height: 30px;
        border-bottom: 1px solid #1a1f25;

        .item {
          float: left;
          margin: 0 10px;
          padding: 0 10px;
          cursor: pointer;
          height: 30px;
          line-height: 31px;

          &.active {
            color: @tradingLinkActiveColor;
            border-bottom: 1px solid @tradingLinkActiveColor;
          }
          img {
            vertical-align: middle;
          }
        }
      }

      .pairCaption {
        padding: 0 20px;
        .mix-clearfix;
        font-size: 12px;

        .item {
          float: left;
          line-height: 28px;

          &:last-child{
            text-align: right;
          }
        }
      }

      .pairList {
        font-size: 12px;

        li {
          .mix-clearfix;
          height: 33px;
          padding:0 20px;
          cursor: pointer;
          border-bottom: 1px solid #1a1f25;

          &.active {
            font-weight: bold;
            background-color: #2b3448;
          }
          &:hover {
            background-color: #191f2b;
          }
          .rose {
            text-align: right;
          }
        }

        li>span {
          float: left;
          line-height: 34px;

          span {
            color: #80919C;
          }
        }
      }
    }

    .currentPairInfo {
      .mix-clearfix;
      float: left;
      padding:0 8px 0 12px;
      font-size: 12px;
      color: #80919C;

      p {
        float: left;
        padding: 0 12px;
      }
      span {
        display: block;
        margin-top: 10px;
        font-size: 12px;
        i {
          display: inline-block;
          width: 9px;
          height: 9px;
        }
      }
      .white {
        color: #fff;
      }
      span.up i {
        background: url(../../../assets/images/head/arrow-up-green.png) no-repeat;
      }
      span.down i {
        background: url(../../../assets/images/head/arrow-down-red.png) no-repeat;
      }
    }

    .right {
      float: right;
      height: 50px;
    }

    .menu.assetsMenu {
       .caption {
         margin: 0;
         margin-left: -1px;
         height: 50px;
         width: auto;
       }
    }
    .menu.userMenu {
      position: relative;
      width: auto;

      &:hover {

        >.caption {

          .icon {
            background: url(../../../assets/images/head/menu-user-active.png) no-repeat;
          }
        }
      }

      .caption {
        width: auto;
        margin:0;
        padding: 0 20px;

        .icon {
          background: url(../../../assets/images/head/menu-user.png) no-repeat;
        }
        .text {
          text-align: left;
          font-size: 14px;
          color: #FFFFFF;
        }
      }
      .panel {
        position: absolute;
        left: 1px;
        width: 130px;

        a {
          display: block;
          padding-left: 48px;
          padding-right: 10px;
          min-width: 72px;
          line-height: 37px;
          height: 37px;
          text-overflow:ellipsis;
          white-space:nowrap;
          overflow:hidden;

          &:hover {
            color: @tradingLinkActiveColor;
          }
        }
        a.safe {
          background: url(../../../assets/images/head_safe2.png) no-repeat 20px center;
        }
        a.ctc {
          background: url(../../../assets/images/head/menu-ctc.png) no-repeat 11px 9px;
        }
        a.exit {
          background: url(../../../assets/images/head_exit2.png) no-repeat 20px center;
        }

        a.safe:hover {
          background-image: url(../../../assets/images/head_safe.png);
        }
        a.ctc:hover {
          background-image: url(../../../assets/images/head/menu-ctc-active.png);
        }
        a.exit:hover {
          background-image: url(../../../assets/images/head_exit.png);
        }
      }

      .noLogin {
        padding: 0 20px;
        border: 0;
        border-left:  solid 1px #373E48;
        border-right:  solid 1px #373E48;

        &:hover {
          background-color: transparent;
        }

        i {
          vertical-align: middle;
          display: inline-block;
          margin: 0 15px;
          margin-top: -2px;
          width: 1px;
          height: 25px;
          background-color: #373E48;
        }
        a {
          display: inline-block;
          font-size: 14px;
          color: #FFFFFF;
          &:hover {
            color: @tradingLinkActiveColor;
          }
        }
      }
    }

    .langMenu {
      float: right;
      margin: 13px 0 0 10px;
      width: 138px;
      height: 24px;
      font-size: 12px;
      color: #fff;
      user-select: none;
      cursor: pointer;

      .selectedLanguage {
        display: block;
        height: 24px;

        img {
          vertical-align: top;
          display: inline-block;
          margin-top: 5px;
          margin-left: 6px;
          width: 23px;
          height: 14px;
        }
        span {
          vertical-align: top;
          display: inline-block;
          margin-top: 5px;
          margin-right: 6px;
          text-indent: 4px;
          font-size: 14px;
          color: #FFFFFF;
        }
        i {
          vertical-align: top;
          display: inline-block;
          margin-right: 10px;
          width: 12px;
          height: 7px;
          margin-top: 9px;
          background: url(./../../../assets/images/arrow-down.png) no-repeat;

          &.active {
            transform: scaleY(-1);
          }
        }
      }
    }

    .languageList {
      position: relative;
      z-index: 500;
      margin-top: 2px;
      margin-left: 0px;
      width: 128px;
      line-height: 24px;
      border-radius: 6px;
      background-color: #29384f;

      li {
        border-bottom: solid 1px #42506d;

        img {
          vertical-align: top;
          display: inline-block;
          margin-top: 5px;
          margin-left: 8px;
          margin-right: 10px;
          width: 23px;
          height: 14px;
        }
        span {
          vertical-align: top;
          display: inline-block;
          margin-top: 6px;
          width: 60px;
          text-indent: 4px;
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
